<template>
  <div class="container" style="margin-top:80px;width:82%">
  <el-row class="tac">
  <el-col :span="2" style="z-index:5;position:fixed;" class="tab">
    <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="rgb(248,248,248)"
      text-color="black">
         <el-menu-item-group v-for="(subject,index) in subjectList" :key="index" >
          <template slot="title">{{subject.title}}</template>
          <el-menu-item  v-for="(subjectTwo,index) in subject.children" :key="index" @click="subjectone(subjectTwo.id)" >{{subjectTwo.title}}</el-menu-item>
        </el-menu-item-group>
    </el-menu>

  
  </el-col>
</el-row>

   <div class= "row" style="margin-left:50px">
            
    <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-1" >
    

      <div class="col-md-12" style="opacity: 0.9;">

         <div v-swiper:mySwiper="swiperOption"  autoplay:true class="bann">
          <div class="swiper-wrapper"  >

          <div v-for="banner in bannerList" :key="banner.id" class="swiper-slide">
              <a target="_blank" :href="banner.linkUrl">
                  <img :src="banner.imageUrl" :alt="banner.title" class="bannerimg" >
              </a>
          </div> 
          
         </div>
         <div class="swiper-pagination swiper-pagination-white"></div>
         <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
         <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      </div>


      </div>

    <div class=" col-md-12" >

  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin-top:10px">
  <el-menu-item index="1" @click="subjectbysupport()">点赞最多</el-menu-item>
  <el-menu-item index="2" @click="subjectbylook()">浏览最多</el-menu-item>
  <el-menu-item index="3" @click="subjectbycollection()">收藏最多</el-menu-item>
</el-menu>
            <ul   class="blog">
                <li v-for="course in eduList" :key="course.id" @click="info(course.id)">
                    <img
                        :src="course.cover"
                        class="img-responsive"
                        :alt="course.title"
                      >
                    <p class="title">{{course.title}}</p>
                    <div v-html="course.content" class="cont"></div>
                    <p class="info">
                        <b >{{course.nickname}} &nbsp;/</b>
                        <b class="time">{{course.created}} &nbsp;/</b>
                        <b>{{course.lookCount}} 浏览 &nbsp;/</b>
                        <b>{{course.supportCount}} 点赞 &nbsp;/</b>
                        <b>{{course.commentCount}} 评论 &nbsp;/</b>
                        <b>{{course.collectionCount}} 收藏 &nbsp;</b>
                        
                    </p>
                </li>
            </ul>

        <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        background
        style="padding:30px 0;text-align:center;"
        layout="total,prev,pager,next,jumper"
        @current-change="initBlogFirst" 
       />
  
        </div>



        </div>
        
        <div class="col-xs-0 col-sm-0 col-md-3">


        
      
      


        <div class="col-md-12" >
       <img class="backgrounda" src="../../assets/bannner2.jpg" alt="" /> 
        <div class="recommendd">  
            <span>热门文章</span>
             <hr> 
            <ul class="contentt">
                <li  v-for="hot in hotList" :key="hot.id">
                     <img
                        :src="hot.cover"
                        class="img-responsive"
                        :alt="hot.title"
              
                      >
                    <p class="text">{{hot.title}}</p>
                    <p class="info">
                        <b class="glyphicon glyphicon-star-empty" style="color: orange;"> {{hot.collectionCount}}</b>
                        <b class="glyphicon glyphicon-thumbs-up" style="color: red;"> {{hot.supportCount}}</b>
                        <b class="glyphicon glyphicon-comment"> {{hot.commentCount}}</b>
                    </p>
                </li>
               
            </ul>
        </div>
        
          <div class="recommendd">   
            <span>作者排行榜</span>
             <hr> 
            <ul class="contentt">
                <li  v-for="author in hotAuthor" :key="author.id">
                     <img
                        :src="author.avatar"
                        class="img-responsive"
                        style="width:90px;border-radius:50%;"
                      >
                    <p class="text"><i class="el-icon-user-solid"></i> {{author.nickname}}</p>
                    <p class="info">
                        <b style="font-size:13px">获赞 {{author.count}}</b>
               
             
                    </p>
                    <hr>
                </li>
               
            </ul>
        </div>

        

        </div>


        </div>

        </div>

  </div>
</template>
<script>
import banner from '@/api/banner'
import index from '@/api/index'
import blog from '@/api/blog'
 export default {
   layout: 'blog',
   data(){
     return{
        page:1,
        limit:2,
        total:0,
        data:{},
        subjectList:[],
        subjectTwoList:[],
        blogquery:{},
        subjectindex:"1-1",
        swiperOption: {
        autoplay:true,
        lookCount:"",
        collectionCount:"",
        supportCount:"",
        //配置分页
        pagination: {
          el: '.swiper-pagination'//分页的dom节点
        },
        //配置导航
        navigation: {
          nextEl: '.swiper-button-next',//下一页dom节点
          prevEl: '.swiper-button-prev'//前一页dom节点
        }
      },
      //banner数组
      bannerList:[],
      eduList:[],
      hotList:[],
      hotAuthor:[]
     }
   },
   created(){
     
    this.initBlogFirst()
    this.initSubject()
        
    //调用查询banner的方法
    this.getBannerList()
    this.getHotBlog()
    this.getHotAuthor()
   },
    methods: {
    //查询热门作者
    getHotAuthor(){
      blog.getHotAuthor()
      .then(response => {
        this.hotAuthor = response.data.data.hotAuthor
      })
    },
    info(id){
        this.$router.push({ path:'/blog/'+id  })
    },
     getHotBlog(){
      index.getHotData()
        .then(response => {
          this.hotList = response.data.data.hot
        })
    },
    //查询banner数据
    getBannerList() {
      banner.getListBanner()
        .then(response => {
          this.bannerList = response.data.data.list
        })
    },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      initBlogFirst(page = 1){
        this.page = page
        blog.getBlogList(this.page,this.limit,this.blogquery)
        .then(response => {
          this.eduList = response.data.data.rows
           this.total=response.data.data.total
        })
      },
      subjectbysupport(){
        this.blogquery.supportSort="1"
        this.blogquery.lookSort=""
        this.blogquery.collectionSort=""
         this.gotoPage(this.page)
      },
       subjectbylook(){
        this.blogquery.supportSort=""
        this.blogquery.lookSort="1"
        this.blogquery.collectionSort=""
         this.gotoPage(this.page)
      },
       subjectbycollection(){
        this.blogquery.supportSort=""
        this.blogquery.lookSort=""
        this.blogquery.collectionSort="1"
         this.gotoPage(this.page)
      },
      //查询所有的分类
      initSubject(){
        blog.getAllSubject()
        .then(response => {
          this.subjectList = response.data.data.list
                console.log(this.subjectList[1].children)
        })
      },
      //分页切换
      gotoPage(page){
          blog.getBlogList(page,2,this.blogquery)
        .then(response => {
         this.eduList = response.data.data.rows
        })
      },
       subjectone(subjectId){
         this.blogquery.subjectId=subjectId
         this.gotoPage(1)
      },
    }
  }
</script>
<style>
    @media (max-width:1000px){ 
      .tab{
        margin-left:-50px
      }
     
            html,body{
              max-width: 100%;
              overflow-x: hidden;
            }
             .container{
                 width: 100%;
                 overflow:auto;overflow-x: hidden
             }
             .col-xs-0{
             display: none;
              }
              /* .swiper-slide img{
               width:100%
              }
             .swiper-slide{
                height:auto;
              } */
              .bann{
                display:none
              }

     }
       @media (min-width:1000px){ 
          body{
          background-image: url(../../assets/background2.jpg);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-attachment: fixed;
  } 

     }
 *{
     padding: 0;
     margin: 0;
 }
   .swiper-slide img{
    width:100%;
    height: 420px;
    border-radius: 10px;
  }
  
  
  .backgrounda {
     width: 100%;
     height: auto;
     border-radius: 10px;

  }
  
  .recommendd{
    margin-top:20px;
    position: relative;
    background-color:#fff;
    border-radius: 10px;
    opacity: 0.9;
    height:380px;
    overflow: hidden;
  }
  .recommendd:hover{
    opacity: 1.0;
  }
  .recommendd hr{
      background-color: rgb(250,206,224);
      width: 290px;
      height:0.5px;
      position:absolute;
      top:25px;
  }
  .recommendd span{
      display:inner-block;
      position: absolute;
      font-size: 20px;
      left: 20px;
      top: 10px;
      font-weight: bold;
   
  }
  .recommendd .content{
    background-color:#fff;
    position: absolute;
    width: 100%;
    top:47px;
    overflow: hidden;
  }


  .contentt li{
      position: relative;
      width: 100%;
      margin-left: 20px;
      height: 80px;
      top:50px;
      margin-top:10px
  }
  .contentt li img{
    position: absolute;
    width: 100px;
    height: 75px;
    left:-10px;

    border-radius: 5px;
   
  }
  .contentt li .text{
    width: 100px;
    position: absolute;
    left: 95px;
    font-size:20px;
  }
  .contentt li hr{
    background-color: rgb(250,206,224);
    height: 0.5px;
    border:0px;
    top:60px;
    left:-20px
  }
  .contentt li .info{
    position: absolute;
    left:95px;
    top:55px
  }
  .contentt b{
      font-size: 10px;
      padding: 2px;
      cursor: pointer;
      color:gray;
  }
  .contentt .info .shijian{
  
    
      font-size: 12px;
  }
  .c{
      display: block;
      font-size: 20px;
      font-weight: bold;
      padding-top:15px
  }
  .blog{
    width: 100%;

  }
  .blog li{
      cursor: pointer;
      position: relative;
      width: 100%;
      height: 180px;
      margin-top: 20px;
      background-color: white;
      opacity: 0.9;
      border-radius: 10px;
      
  }
  .blog li:hover{
    opacity: 1.0;
  }
  .blog li img{
    position: absolute;
    width: 200px;
    border-radius: 10px;
    top:15px;
    left:20px
  }
   @media (max-width:1000px){ 
  .blog li img{
    width:150px;
    margin-left:-10px
  }
  .blog li{
    height:140px
  }

  .blog li .title{
    margin-left:-70px
  }
   .blog li .info{
     margin-left:-70px;
     margin-top:-40px
   }
    .blog li .cont{
       margin-left:-70px
    }
     }
  .blog li .title{
    position: absolute;
    left: 240px;
    top:20px;
    font-size:20px;
    font-weight: bold;
  }
  .blog li .info{
    position: absolute;
    left:240px;
    top:140px
  }
  .blog li .cont{
    width: 150px;
    position: absolute;
    left: 240px;
    top:50px;
    height:15px;
    overflow: hidden;
  }
  .blog b{
      padding: 3px;
      cursor: pointer;
      
      color:gray;
      font-size: 13px;
  }

     </style>